<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹窗示例</title>
    <style>
        /* 背景遮罩样式 */
        .overlay {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7); /* 半透明背景 */
            justify-content: center; /* 居中对齐 */
            align-items: center; /* 垂直居中 */
        }

        /* 弹窗样式 */
        .modal {
            background-color: white; /* 白色背景 */
            padding: 20px; /* 内边距 */
            border-radius: 5px; /* 圆角 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
        }

        /* 关闭按钮样式 */
        .close-btn {
            cursor: pointer; /* 鼠标悬停变成手形 */
            color: #ff0000; /* 红色 */
        }
    </style>
</head>
<body>

    <h1>弹窗示例</h1>
    <button id="openModal">打开弹窗</button> <!-- 按钮触发弹窗 -->

    <!-- 弹窗 -->
    <div class="overlay" id="modalOverlay">
        <div class="modal">
            <h2>弹窗标题</h2>
            <p>这是弹窗的内容。</p>
            <span class="close-btn" id="closeModal">关闭</span> <!-- 关闭按钮 -->
        </div>
    </div>

    <script>
        // 获取元素
        const openModal = document.getElementById('openModal');
        const modalOverlay = document.getElementById('modalOverlay');
        const closeModal = document.getElementById('closeModal');

        // 打开弹窗
        openModal.addEventListener('click', () => {
            modalOverlay.style.display = 'flex'; // 显示弹窗
        });

        // 关闭弹窗
        closeModal.addEventListener('click', () => {
            modalOverlay.style.display = 'none'; // 隐藏弹窗
        });
    </script>

</body>
</html>
